<template>
  <div class="de-detail">
    <div>
      <c-list
        ref="form"
        :model="formData"
        :rules="formRules"
        label-width="130px"
        :column="3"
      >

        <c-list-item type="text" label="装修巡检任务号" :value="formData.patrolTaskNo" />
        <c-list-item
          type="text"
          dict-type-code="PATROL_INSPECTION"
          label="巡检任务进度"
          :value="formData.schedule"
        />
        <!-- interfacePath:`/slm-admin/api/v1/user/listUsers`, -->
        <el-form-item label="巡检人员:" prop="personCode">
          <input-with-dialog
            v-model="person"
            :disabled="isDetail"
            :props="{label:'userName',value:'account'}"
            multiple
            :config="{
              title:'巡检人员',
              width:'600px',
              interfacePath:'/slm-admin/api/v1/user/domainMarketingUser/page',
              method:'post',
              filtersRaw: [{ 'id': 'state', 'property': 'state', 'value': 1, 'operator': '=' }],
              paramsRaw:{},
              setting:[
                {prop:'account',title:'编码'},
                {prop:'userName',title:'名称'},
                {prop:'orgName',title:'组织'},
              ]
            }"
            @change="handleChangePerson"
          />
        </el-form-item>
        <c-list-item type="date" label="巡检开始时间" :value="formData.beginTime">
          <el-date-picker
            v-model="formData.beginTime"
            :disabled="isDetail"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            clearable
          />
        </c-list-item>
        <c-list-item type="date" label="巡检结束时间" :value="formData.endTime">
          <el-date-picker
            v-model="formData.endTime"
            :disabled="isDetail"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            clearable
          />
        </c-list-item>
        <c-list-item type="text" label="应整改完成时间" :value="formData.planCompletionDate" />

        <c-list-item :span="3" type="text" label="拍摄地址" :value="formData.address">
          <el-input v-model="formData.address" :disabled="isDetail" />
        </c-list-item>

        <c-list-item type="text" label="参与人合照/现场照片">
          <div class="img-upload-container">
            <import-img
              :limited="20"
              :photo-list="fileList"
              :readonly="!!isDetail"
              :config-attachment-id="configId"
            />
          </div>

        </c-list-item>
        <c-list-item type="text" label="经度" :value="formData.longitude">
          <el-input v-model="formData.longitude" :disabled="isDetail" />
        </c-list-item>

        <c-list-item type="text" label="纬度" :value="formData.latitude">
          <el-input v-model="formData.latitude" :disabled="isDetail" />
        </c-list-item>

      </c-list>
    </div>
  </div>
</template>
<script>
import importImg from '@/components/importImg/miniUpload'
import { filterURL } from '@/utils'
import { getShopAttachment } from '@/api/common'
// import { getProConfigEditData } from '@/api/proConfig'
export default {
  name: 'ApplicationInfo',
  components: { importImg },
  props: {
    detailData: {
      type: Object,
      default: () => { return {} }
    },
    configId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      filterURL,
      isDetail: 0,
      person: [],
      fileList: [],
      formRules: {
        // curtainOrderTime: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      formData: {
        patrolTaskNo: '',
        personCode: '',
        personName: '',
        beginTime: '',
        planCompletionDate: '',
        endTime: '',
        address: '',
        id: '',
        longitude: '',
        latitude: ''
      }
    }
  },
  watch: {
    detailData: {
      handler(v) {
        if (!v || !v.id) return
        const { id, schedule, patrolTaskNo, personCode, personName, planCompletionDate, beginTime, endTime, address, longitude, latitude } = v
        this.formData = { id, schedule, patrolTaskNo, personCode, personName, planCompletionDate, beginTime, endTime, address, longitude, latitude }
        this.person = [{ label: personName, value: personCode }]
        getShopAttachment(v.id).then(res => {
          if (res.success && res.data) {
            this.fileList = res.data.filter(v => v.attachmentType === '参与人合照/现场照片')
          }
        })
      }
    }
  },
  created() {
    const { isDetail } = this.$route.query
    this.isDetail = isDetail
  },
  methods: {
    handleSave() {
      return {
        formData: this.formData, pics: this.fileList.map(v => { return { ...v, attachmentType: '参与人合照/现场照片' } })
      }
    },
    handleBack() {
      this.clearForm()
      this.$store.dispatch('views/goBack')
    },
    handleChangePerson(data) {
      if (data.length !== 0) {
        this.$set(this.formData, 'personCode', data.map(i => i.account).join(','))
        this.$set(this.formData, 'personName', data.map(i => i.userName).join(','))
      } else {
        this.$set(this.formData, 'personCode', '')
        this.$set(this.formData, 'personName', '')
      }
    },
    clearForm(done) {
      this.formData = {
        patrolTaskNo: '',
        personCode: '',
        personName: '',
        beginTime: '',
        planCompletionDate: '',
        endTime: '',
        address: '',
        id: '',
        longitude: '',
        latitude: ''
      }
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
